<template>
<!-- 今年流通量 -->
    <div class="line-chart" >
        <div class="chart_line_box" ref="chart_line_box" />
        
    </div>
</template>

<script>

import {
    LineChart
} from 'echarts/charts';
import {
    GridComponent,
    LegendComponent,
    TooltipComponent
} from 'echarts/components';
import * as echarts from 'echarts/core';
import {
    CanvasRenderer
} from 'echarts/renderers';
// import { getApiDataList } from '@/api'

echarts.use(
    [GridComponent, LegendComponent, TooltipComponent, LineChart, CanvasRenderer]
);

const colors = [
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0, color: '#FFED00' // 0% 处的颜色
        }, {
            offset: 1, color: '#F6365F' // 100% 处的颜色
        }],
        global: false // 缺省为 false
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0, color: '#E59F9E'
        }, {
            offset: 1, color: '#B446D3'
        }],
        global: false
    },
    {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
            offset: 0, color: '#D9DC4E'
        }, {
            offset: 1, color: '#00CFC9'
        }],
        global: false
    }
]

export default {
    name: 'lineChart',
    props: {
    chartData: {
      type: Array,
      default:function () {
      return [{
        time:"10-12",count:9
      },{
        time:"10-23",count:12
      },
      {
        time:"10-23",count:14
      }]
    }
    },
  },
    data() {
        return {
        }
    },
    watch: {
    chartData: {
      handler(oldVal,newVal) {
        // 在 chartData 变化时重新构建图表 options
        console.log(oldVal,newVal)
        if(oldVal!==newVal){
            this.initChart()

        }
      },
    },
  },
    methods: {
        createOption(data) {
            return {
                animationDuration: 2500,
                legend: {
                    top: 10,
                    icon: 'roundRect',
                    textStyle: {
                       
                        // color: '#83d8ff'
                    },
                    // data: names
                },
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        color: '#fff',
                    },
                    alwaysShowContent: true, // 一直显示提示框
                    backgroundColor: 'rgba(6, 79, 111,.8)',
                    padding: [15, 55],
                    borderWidth: 0,
                    axisPointer: {
                        lineStyle: {
                            width: 4,
                            color: 'rgba(42, 241, 255)'
                        }
                    },

                },
                grid: {
                    left: '0%',
            top: '15%',
            right: '10%',
            bottom: '5%',
            containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisTick: { show: false },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            // color: 'rgba(42, 241, 255)',
                            width: 4,
                        }
                    },
                    axisLabel: {
                  
                    },
                    data:data.map(item=>item.time)
                }],
                yAxis: [
                    {
                        type: 'value',
                        // name: '单位/K',
                        nameTextStyle: {
                        
                        },
             
                        axisTick: { show: false },
                        axisLine: {
                            onZero: true,
                            show: true,
                            lineStyle: {
                             
                            }
                        },
                     
                        splitLine: {
                            show: true,
                            lineStyle: {
                // type: 'dashed'
                color:'rgba(255,255,255,0.2)'
              }
                        },
                    },
                ],
                series: [{
                    // name: names[0],
                    type: 'line',
                    smooth: true,
                     symbolSize: 0,
                    itemStyle: {
                        color: colors[0]
                    },
                    areaStyle: {
                        opacity: 0.6,
                        color: colors[0]
                    },
                    lineStyle: {
                
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.map(item=>item.count)
                }
              ]
            }
        },
        initChart() {
            if (this.chart) {
                this.chart.dispose();
            }
            if (!this.$refs.chart_line_box) return;

            this.chart = echarts.init(this.$refs.chart_line_box, 'macarons')
            this.chart.setOption(this.createOption(this.chartData))
            this.tooltipLoop()
        },
        tooltipLoop() {
            // 提示框循环
            clearInterval(this.stackLoop);

            let length = this.chartData.length, index = 0;
            this.chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 1,
                dataIndex: index
            });
            this.stackLoop = setInterval(() => {
                index = (index + 1) % length
                this.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: index
                });
            }, 2000)
        },

    },

    mounted() {
this.initChart()
    },
   
}
</script>

<style lang="less" scoped>
.line-chart {
    width: 100%;
    height: 100%;
    margin: 10px auto 0;

    .chart_line_box {
     width: 100%;
    height: 100%;
    }

}
</style>
